<template>
  <!-- 问卷项 -->
  <div class="question">
    <div style="border-bottom: 1px solid rgb(238, 238, 238)">
      <span style="font-size: 18px">
        {{ item.title == '' ? '默认标题' : item.title }}
      </span>
      <!-- 上半部分 -->
      <div
        style="
          float: right;
          font-size: 10px;
          vertical-align: bottom;
          margin-top: 3px;
        "
      >
        <span style="margin: 0 10px"> ID:{{ item.questionnaireId }}</span>
        <span style="margin: 0 10px">
          答卷:{{ item.amount == null ? 0 : item.amount }}
        </span>
        <span v-if="item.qstatus > 0" style="margin: 0 10px">
          <span style="color: rgb(90, 165, 240)">已发布:</span>
          {{ item.lastOpenTime }}
        </span>
        <span v-else style="margin: 0 10px"> 未发布： ——/—/— —:—:— </span>
        <span> 创建:{{ item.createdTime }} </span>
      </div>

      <!-- 下半部分 -->
    </div>
    <div style="margin-top: 12px">
      <div style="display: inline-block; margin-top: 3px">
        <button
          v-if="item.amount && item.qstatus == 0"
          class="button1"
          @click="showModal2 = true"
        >
          <n-icon size="27"><notebook-reference /></n-icon>
          <span class="content"> {{ type }}修改</span>
        </button>
        <button v-else class="button1" @click="modify">
          <n-icon size="27"><notebook-reference /></n-icon>
          <span class="content"> {{ type }}修改</span>
        </button>
        <n-modal
          v-model:show="showModal2"
          preset="dialog"
          :show-icon="false"
          positive-text="确认"
          @positive-click="modify"
          negative-text="取消"
          title="警告"
        >
          <div style="margin: 50px 0 30px 25px; font-size: 16px">
            问卷编辑后，答卷数据将被清除，请问是否继续？
          </div>
        </n-modal>
        <button class="button1" @click="fabu">
          <n-icon size="27"><book-outline /></n-icon>
          <span class="content"> {{ type }}发布</span>
        </button>
        <button class="button1" @click="set">
          <n-icon size="27"><bookmarks-outline /></n-icon>
          <span class="content">{{ type }}设置</span>
        </button>
        <button class="button1" @click="analyse">
          <n-icon size="27"><notebook /></n-icon>
          <span class="content">{{ type }}分析</span>
        </button>
      </div>
      <div style="float: right; margin-top: 5px">
        <button v-if="item.qstatus <= 0" class="button2" @click="openQ">
          <n-icon size="16"><play-circle-outline /></n-icon>
          <span class="content2">发布</span>
        </button>
        <button v-else class="button2" @click="closeQ">
          <n-icon size="16"><pause-future /></n-icon>
          <span class="content2">停止</span>
        </button>
        <button class="button2" @click="showModal = true">
          <n-icon size="16"><copy-outline /></n-icon>
          <span class="content2">复制</span>
        </button>
        <n-modal
          v-model:show="showModal"
          preset="dialog"
          title="复制问卷"
          :show-icon="false"
          positive-text="确认"
          @positive-click="copy"
          negative-text="取消"
        >
          <div style="margin-top: 30px">
            <span style="font-weight: 900; font-size: 15px">问卷标题</span>
            <div style="display: inline-block; width: 6%"></div>
            <n-input
              v-model:value="value"
              style="width: 60%; vertical-align: 37%"
            ></n-input>
          </div>
        </n-modal>
        <button class="button2" @click="exportQ">
          <n-icon size="16"><file-export /></n-icon>
          <span class="content2">导出</span>
        </button>
        <button class="button2" @click="dele">
          <n-icon size="16"><delete /></n-icon>
          <span class="content2">删除</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, reactive, onMounted } from 'vue';
import {
  PlayCircleOutline,
  CopyOutline,
  BookOutline,
  BookmarksOutline,
} from '@vicons/ionicons5';
import { FileExport, Notebook } from '@vicons/tabler';
import { Delete, PauseFuture, NotebookReference, Book } from '@vicons/carbon';
import { Ques } from '@api/question';
import { useMessage } from 'naive-ui';
const message = useMessage();

import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
  item: Object,
});
const type = ref(props.item.type == 1 ? '考试' : '问卷');
const modify = () => {
  if (item.qstatus <= 0) {
    let url = '/q/create/' + props.item.type + '/' + item.questionnaireId;
    router.push(url);
  } else {
    message.info('请停止发布再进行修改');
  }
};
const analyse = () => {
  let url =
    '/q/a/' + props.item.type + '/' + item.questionnaireId + '/overview';
  router.push(url);
};

const fabu = () => {
  let url = '/q/a/' + props.item.type + '/' + item.questionnaireId + '/send';
  router.push(url);
};
const set = () => {
  let url = '/q/a/' + props.item.type + '/' + item.questionnaireId + '/design';
  router.push(url);
};

function dateFormat(fmt: any, date: any) {
  let ret: any;
  const opt = {
    'Y+': date.getFullYear().toString(), // 年
    'm+': (date.getMonth() + 1).toString(), // 月
    'd+': date.getDate().toString(), // 日
    'H+': date.getHours().toString(), // 时
    'M+': date.getMinutes().toString(), // 分
    'S+': date.getSeconds().toString(), // 秒
    // 有其他格式化字符需求可以继续添加，必须转化成字符串
  };
  for (let k in opt) {
    ret = new RegExp('(' + k + ')').exec(fmt);
    if (ret) {
      fmt = fmt.replace(
        ret[1],
        ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
      );
    }
  }
  return fmt;
}
const openQ = () => {
  item.lastOpenTime = dateFormat('YYYY/mm/dd HH:MM:SS', new Date());
  Ques.openQ({ id: item.questionnaireId })
    .then((res: any) => {
      console.log(res);
      if (res.data.status === 200) {
        message.success('发布成功！');
        item.qstatus = 1;
      } else {
        console.log(res);
        message.error('出错了!');
      }
    })
    .catch((error: any) => {
      message.error(error);
    });
};
const closeQ = () => {
  Ques.closeQ({ id: item.questionnaireId })
    .then((res: any) => {
      console.log(res);
      if (res.data.status === 200) {
        item.qstatus = 0;
        message.success('关闭成功！');
      } else {
        console.log(res);
        message.error('出错了!');
      }
    })
    .catch((error: any) => {
      message.error(error);
    });
};
const emit = defineEmits(['dele', 'copy']);
const item = reactive(props.item as any);
console.log('item: ', item);

const copy = () => {
  console.log('我要复制了');
  console.log({ id: item.questionnaireId, title: value.value });
  Ques.copyQ({ id: item.questionnaireId, title: value.value })
    .then((res: any) => {
      console.log(res);
      if (res.data.status === 200) {
        emit('copy', res.data.data);
      } else {
        console.log(res);
        message.error('出错了');
      }
    })
    .catch((error: any) => {
      message.error(error);
    });
};
const showModal = ref(false);
const showModal2 = ref(false);
const value = ref(item.title + '-副本');
const dele = () => {
  Ques.deleteQ({ id: item.questionnaireId })
    .then((res: any) => {
      console.log(res);
      if (res.data.status === 200) {
        emit('dele', item.questionnaireId);
      } else {
        console.log(res);
        message.error('出错了');
      }
    })
    .catch((error: any) => {
      message.error(error);
    });
};

const exportQ = () => {
  window.open(
    'http://59.110.170.162:8090/api/q/download?questionnaireId=' +
      item.questionnaireId
  );
};
</script>

<style lang="scss" scoped>
.question {
  width: 96%;

  padding: 10px 20px;
  // border: 1px solid rgb(238, 238, 238);
}
button {
  cursor: pointer;
}
button:hover {
  color: rgb(90, 165, 240);
}
.button1 {
  border: none;
  background: rgba(1, 1, 1, 0);
}
.button2 {
  border: none;
  background: rgba(1, 1, 1, 0);
}
span.content {
  vertical-align: 50%;
}
span.content2 {
  vertical-align: 20%;
}
</style>
